<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <title>冲动消费记录器</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
    body { 
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      min-height: 100vh;
      color: #333;
      line-height: 1.6;
    }
    
    .container {
      max-width: 100%;
      padding: 15px;
      margin: 0 auto;
    }
    
    h1 {
      text-align: center;
      color: white;
      margin-bottom: 20px;
      font-size: 1.8rem;
      text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    }
    
    .setup-card {
      background: white;
      border-radius: 15px;
      padding: 20px;
      margin-bottom: 20px;
      box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    }
    
    .setup-row {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 15px;
    }
    
    .setup-row label {
      font-weight: 600;
      color: #555;
      min-width: 120px;
    }
    
    input[type="number"], input[type="text"], select {
      padding: 12px;
      border: 2px solid #e1e5e9;
      border-radius: 8px;
      font-size: 16px;
      flex: 1;
      min-width: 120px;
      transition: all 0.3s ease;
    }
    
    input[type="number"]:focus, input[type="text"]:focus, select:focus {
      outline: none;
      border-color: #667eea;
      box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }
    
    button {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      border: none;
      padding: 12px 20px;
      border-radius: 8px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    }
    
    button:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
    }
    
    button:active {
      transform: translateY(0);
    }
    
    .action-buttons {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin: 20px 0;
    }
    
    .action-buttons button {
      flex: 1;
      min-width: 140px;
    }
    
    .player-container { 
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 15px;
      margin-bottom: 20px;
    }
    
    .player { 
      background: white;
      border-radius: 12px;
      padding: 15px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.1);
      transition: all 0.3s ease;
    }
    
    .player:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    }
    
    .player-name {
      font-size: 18px;
      font-weight: 700;
      margin-bottom: 12px;
      padding: 8px;
      border: 2px dashed transparent;
      border-radius: 6px;
      transition: all 0.3s ease;
    }
    
    .player-name:focus {
      outline: none;
      border-color: #667eea;
      background: #f8f9ff;
    }
    
    .player-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
      flex-wrap: wrap;
      gap: 8px;
    }
    
    .player-label {
      font-weight: 600;
      color: #555;
      font-size: 14px;
    }
    
    .player-value {
      font-weight: 700;
      font-size: 16px;
    }
    
    .player input[type="number"] { 
      width: 80px;
      padding: 8px;
      text-align: center;
      font-weight: 600;
    }
    
    .player select {
      padding: 8px;
      font-weight: 600;
    }
    
    .day-header { 
      background: white;
      border-radius: 15px;
      padding: 15px;
      margin: 20px 0;
      text-align: center;
      font-size: 1.4rem;
      font-weight: 700;
      color: #667eea;
      box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }
    
    .item-input {
      background: white;
      border-radius: 12px;
      padding: 15px;
      margin-bottom: 20px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }
    
    .item-input label {
      display: block;
      font-weight: 600;
      color: #555;
      margin-bottom: 8px;
    }
    
    .hidden { display: none; }
    
    .log-section { 
      background: white;
      border-radius: 12px;
      padding: 15px;
      margin-bottom: 15px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.1);
      border-left: 4px solid #667eea;
    }
    
    .history-log { 
      background: white;
      border-radius: 12px;
      padding: 15px;
      margin-top: 15px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.1);
      font-size: 0.9em;
      border-left: 4px solid #764ba2;
    }
    
    .toggle-btn { 
      background: transparent !important;
      color: white !important;
      text-decoration: underline;
      box-shadow: none !important;
      padding: 10px 0 !important;
      font-size: 14px;
    }
    
    .toggle-btn:hover {
      transform: none !important;
      background: rgba(255,255,255,0.1) !important;
    }
    
    .player.good { 
      background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
      border-left: 4px solid #2196f3;
    }
    
    .player.evil { 
      background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
      border-left: 4px solid #f44336;
    }
    
    .coins-display {
      background: #f8f9fa;
      border-radius: 8px;
      padding: 8px;
      text-align: center;
      font-weight: 700;
      font-size: 18px;
      color: #28a745;
    }
    
    .change-display {
      font-weight: 700;
      padding: 4px 8px;
      border-radius: 6px;
      text-align: center;
      background: #fff3cd;
      color: #856404;
    }
    
    @media (max-width: 480px) {
      .container {
        padding: 10px;
      }
      
      h1 {
        font-size: 1.5rem;
        margin-bottom: 15px;
      }
      
      .player-container {
        grid-template-columns: 1fr;
      }
      
      .action-buttons {
        flex-direction: column;
      }
      
      .action-buttons button {
        width: 100%;
        margin-bottom: 10px;
      }
      
      .setup-row {
        flex-direction: column;
        align-items: stretch;
      }
      
      .setup-row label {
        min-width: auto;
        margin-bottom: 5px;
      }
      
      .player-row {
        flex-direction: column;
        align-items: stretch;
      }
      
      .player-row > * {
        margin-bottom: 5px;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>🎯 冲动消费记录器</h1>

    <div class="setup-card">
      <div class="setup-row">
        <label>参与拍卖人数：</label>
        <input id="player-count" type="number" min="1" max="15" value="12" />
        <button onclick="setupPlayers()">确认设置</button>
      </div>
    </div>

    <div id="setup-area"></div>
    <div id="auction-area" class="hidden">
      <div class="day-header">第 <span id="day-count">1</span> 天</div>
      
      <div class="item-input">
        <label>拍品名称：</label>
        <input type="text" id="item-name" placeholder="如：每个夜晚*，你会得知与今天白天死于处决的玩家邻近的存活玩家中是否有邪恶玩家" />
      </div>
      
      <div class="player-container" id="players"></div>
      
      <div class="action-buttons">
        <button onclick="calculateWinner()">💰 计算今日得标者</button>
        <button onclick="undoDay()">↩️ 撤回今日计算</button>
        <button onclick="nextDay()">➡️ 下一天</button>
      </div>
      
      <button class="toggle-btn" onclick="toggleHistoryLog()">📊 显示/隐藏金币历史</button>
    </div>

    <div id="log"></div>
    <div id="history-log" class="hidden"></div>
  </div>

  <script>
    let day = 1;
    let players = [];
    let history = [];

    function setupPlayers() {
      const count = parseInt(document.getElementById("player-count").value);
      players = [];
      for (let i = 0; i < count; i++) {
        const name = `玩家${i + 1}`;
        players.push({ name, alignment: "good", coins: 7, bids: [], history: [] });
      }
      document.getElementById("auction-area").classList.remove("hidden");
      document.getElementById("history-log").classList.add("hidden");
      renderPlayers();
    }

    function renderPlayers() {
      const container = document.getElementById("players");
      container.innerHTML = "";
      players.forEach((player, index) => {
        const div = document.createElement("div");
        div.className = `player ${player.alignment}`;
        const bid = player.bids[day - 1] || 0;
        div.innerHTML = `
          <div class="player-name" contenteditable="true" onblur="updateName(${index}, this.innerText)">${player.name}</div>
          
          <div class="player-row">
            <span class="player-label">阵营：</span>
            <select onchange="updateAlignment(${index}, this.value)">
              <option value="good" ${player.alignment === "good" ? "selected" : ""}>😇 善良</option>
              <option value="evil" ${player.alignment === "evil" ? "selected" : ""}>😈 邪恶</option>
            </select>
          </div>
          
          <div class="player-row">
            <span class="player-label">剩余金币：</span>
            <div class="coins-display" id="coins-${index}">${player.coins}</div>
          </div>
          
          <div class="player-row">
            <span class="player-label">今日出价：</span>
            <input type="number" id="bid-${index}" min="0" max="7" value="${bid}" />
          </div>
          
          <div class="player-row">
            <span class="player-label">金币变化：</span>
            <div class="change-display" id="change-${index}">0</div>
          </div>
        `;
        container.appendChild(div);
      });
    }

    function updateName(index, newName) {
      players[index].name = newName.trim() || `玩家${index + 1}`;
    }

    function updateAlignment(index, newAlign) {
      players[index].alignment = newAlign;
      renderPlayers();
    }

    function calculateWinner() {
      const bids = {};
      let error = false;
      players.forEach((p, i) => {
        const bid = parseInt(document.getElementById(`bid-${i}`).value);
        if (bid > p.coins) error = true;
        if (!bids[bid]) bids[bid] = [];
        bids[bid].push({ index: i, player: p });
        p.bids[day - 1] = bid;
      });

      if (error) {
        alert("有玩家出价超过其剩余金币，请检查出价。");
        return;
      }

      const snapshot = JSON.stringify(players.map(p => ({ ...p, coins: p.coins })));
      history[day - 1] = snapshot;

      const prices = Object.keys(bids).map(Number).sort((a, b) => b - a);
      let winner = null;

      for (const price of prices) {
        if (bids[price].length === 1) {
          winner = bids[price][0];
          break;
        }
      }

      let log = `第 ${day} 天 - 拍品「${document.getElementById("item-name").value}」<br/>`;
      if (winner) {
        log += `获胜者：${winner.player.name}（出价：${winner.player.bids[day - 1]}）<br/>`;
        winner.player.coins -= winner.player.bids[day - 1];
        document.getElementById(`change-${winner.index}`).innerText = `-${winner.player.bids[day - 1]}`;
        winner.player.history.push(`D${day} ${winner.player.coins + winner.player.bids[day - 1]}→${winner.player.coins}（消耗${winner.player.bids[day - 1]}）`);
      } else {
        log += `无人独自出价，流拍。<br/>`;
      }

      players.forEach((p, i) => {
        const bid = p.bids[day - 1];
        const sameBidders = bids[bid];
        const isTied = sameBidders.length > 1;
        if (p !== winner?.player) {
          if (p.alignment === "good") {
            p.coins -= bid;
            document.getElementById(`change-${i}`).innerText = `-${bid}`;
            p.history.push(`D${day} ${p.coins + bid}→${p.coins}（消耗${bid}）`);
          } else if (p.alignment === "evil" && !isTied) {
            p.coins -= bid;
            document.getElementById(`change-${i}`).innerText = `-${bid}`;
            p.history.push(`D${day} ${p.coins + bid}→${p.coins}（消耗${bid}）`);
          } else {
            document.getElementById(`change-${i}`).innerText = `退回`;
            p.history.push(`D${day} ${p.coins}→${p.coins}（退回${bid}）`);
          }
        }
        document.getElementById(`coins-${i}`).innerText = p.coins;
      });

      document.getElementById("log").innerHTML += `<div class="log-section">${log}</div>`;
    }

    function nextDay() {
      day++;
      document.getElementById("day-count").innerText = day;
      renderPlayers();
    }

    function undoDay() {
      if (!history[day - 1]) return;
      const snapshot = JSON.parse(history[day - 1]);
      snapshot.forEach((saved, i) => {
        players[i].coins = saved.coins;
        players[i].history.pop();
      });
      renderPlayers();
    }

    function toggleHistoryLog() {
      const box = document.getElementById("history-log");
      if (box.classList.contains("hidden")) {
        let html = "<strong>玩家金币变化历史</strong><br/>";
        players.forEach(p => {
          html += `${p.name}：${p.history.join(" → ")}<br/>`;
        });
        box.innerHTML = html;
        box.classList.remove("hidden");
      } else {
        box.classList.add("hidden");
      }
    }
  </script>
</body>
</html>
